<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <div class="grid-content bg-purple">
          8 6 4 3 1
        </div>
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <div class="grid-content bg-purple-light">4 6 8 9 11</div>
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple">4 6 8 9 11</div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light">8 6 4 3 1</div></el-col>

    </el-row>




    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="/borrow">处理中心</el-menu-item>
      <el-menu-item index="/borrowReal">处理中心2</el-menu-item>
      <el-menu-item index="/gathering">处理中心3</el-menu-item>
    </el-menu>




    <el-container style="height: 720px; border: 1px solid #eee;margin-top: 0px;">
      <el-container>
        <el-header style="text-align: left;padding-left: 40px;font-size: 30px;">
          <strong>{{header}}</strong>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>

        <el-footer style="height: 5px;"></el-footer>
      </el-container>

      <el-footer width="390px" style="background-color: #545c64">
        <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/borrow">处理中心</el-menu-item>
          <el-menu-item index="/borrowReal">处理中心2</el-menu-item>
          <el-menu-item index="/borrow">处理中心3</el-menu-item>
        </el-menu>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "test",
      data() {
        return {
          activeIndex: '1',
          header:'Header'
        };
      },
      methods: {
        /*导航菜单*/
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
          // alert("zhy="+key);
          if (key == "/borrow") {
            this.header="员工信息管理";
          }
          else if (key == "/borrowReal") {
            this.header="患者信息管理";
          }
        },
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

<style scoped>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
